<template>
    <div class="input-wrapper">
        <div style="height: 50px;"></div>
        <div class="input-area">
        <!-- 图片展示处 -->
        <div class="image-preview" v-if="fileList.length > 0">
            <van-uploader 
                v-model="fileList" 
                :max-count="1" 
                :after-read="afterRead"
                :before-delete="beforeDelete"
                :show-upload="false"
            />
        </div>
        
        <!-- 功能按钮区域 - 有图片时隐藏 -->
        <div class="input-btn" v-if="fileList.length === 0">
            <van-button type="default" size="small" @click="handleTrainTicketQuery">查询火车票</van-button>
            <van-button type="default" size="small" @click="handleWeatherQuery">查询天气</van-button>
            <van-uploader 
                :after-read="afterRead"
                :max-count="1"
                accept="image/*"
            >
                <van-button type="default" size="small">图片上传</van-button>
            </van-uploader>
            <van-button type="default" size="small">意见反馈</van-button>
        </div>
        
        <div class="input-content">
            <img src="@/assets/clear.png" alt="清空" @click="clearInput">
            <van-field
                class="input-field"
                type="textarea"
                :placeholder="placeholder"
                :border="false"
                v-model="messageText"
                @keyup.enter.ctrl="sendMessage"
            />
            <van-button class="send-btn" type="default" size="small" @click="sendMessage" :disabled="isSending || (!messageText.trim() && fileList.length === 0)">发送</van-button>
        </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, inject } from 'vue'
import { sendChatMessageStream } from '../../api/chatService';
import { showToast, closeToast } from 'vant';

// 通过依赖注入获取chatMessage组件实例
const chatMessageRef = inject<{ 
  addUserMessage: (content: string, images?: string[]) => void; 
  addAssistantMessage: (content: string, data?: any) => void; 
  setLoading: (loading: boolean) => void;
  updateAssistantMessage: (index: number, content: string, data?: any) => void;
  getMessageCount: () => number;
}>('chatMessageRef');

// 输入框内容
const messageText = ref('');
// 是否正在发送消息
const isSending = ref(false);
// 输入框提示词
const placeholder = ref('把想知道的旅行问题告诉小游匣');
// 当前选择的功能模式
const currentMode = ref('');
// 文件列表 - 使用Vant的UploaderFileListItem类型
const fileList = ref<Array<{ url?: string; file?: File; content?: string; status?: '' | 'done' | 'uploading' | 'failed'; message?: string }>>([]);

// 清空输入框
const clearInput = () => {
  messageText.value = '';
  fileList.value = [];
};

// 图片上传后的处理
const afterRead = async (file: any) => {
  console.log('图片上传:', file);
  
  try {
    // 显示上传中状态
    fileList.value = [{
      url: '',
      file: file.file,
      content: '',
      status: 'uploading'
    }];
    
    showToast({ message: '图片上传中...', duration: 0 });
    
    // 将文件转换为 base64
    const reader = new FileReader();
    reader.onload = async (e) => {
      const base64 = e.target?.result as string;
      
      try {
        // 上传到后端OSS
        const response = await fetch('/upload/base64', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({
            imageData: base64,
            fileName: file.file.name
          })
        });
        
        const result = await response.json();
        
        if (result.success) {
          // 更新文件列表，使用OSS URL
          fileList.value = [{
            url: result.data.url,
            file: file.file,
            content: result.data.url, // 使用OSS URL而不是base64
            status: 'done'
          }];
          
          // 修改提示词
          placeholder.value = '请描述您想了解关于这张图片的什么信息';
          currentMode.value = 'image';
          
          closeToast();
          showToast('图片上传成功');
        } else {
          throw new Error(result.message || '上传失败');
        }
      } catch (error) {
        console.error('图片上传失败:', error);
        fileList.value = [];
        closeToast();
        showToast('图片上传失败: ' + (error as Error).message);
      }
    };
    
    reader.readAsDataURL(file.file);
  } catch (error) {
    console.error('图片处理失败:', error);
    fileList.value = [];
    showToast('图片处理失败');
  }
};

// 删除图片前的处理
const beforeDelete = () => {
  fileList.value = [];
  resetMode();
  return true;
};

// 发送消息到后端API - 流式版本
const sendMessage = async () => {
  const trimmedMessage = messageText.value.trim();
  const hasImage = fileList.value.length > 0;
  
  // 如果没有图片也没有文字，提示用户
  if (!hasImage && !trimmedMessage) {
    showToast('请输入消息内容或上传图片');
    return;
  }

  // 根据当前模式自动添加前缀
  let finalMessage = trimmedMessage;
  if (currentMode.value === 'weather') {
    finalMessage = `查询${trimmedMessage}的天气`;
  } else if (currentMode.value === 'trainTicket') {
    finalMessage = `查询火车票：${trimmedMessage}`;
  }
  // 移除图片模式的自动前缀，让用户自己描述想要了解的内容

  try {
    isSending.value = true;
    showToast({ message: '发送中...', duration: 0 });
    
    // 添加用户消息到聊天记录
    chatMessageRef?.setLoading(true);
    // 如果有图片但没有文字，显示默认消息
    const displayMessage = hasImage && !trimmedMessage ? '分析这张图片' : finalMessage;
    // 收集图片URL
    const imageUrls = hasImage && fileList.value[0]?.content ? [fileList.value[0].content] : undefined;
    chatMessageRef?.addUserMessage(displayMessage, imageUrls);
    
    // 构建消息格式
    let messages;
    if (hasImage && fileList.value[0]?.content) {
      // 如果有图片，构建包含图片的消息格式（使用OSS URL）
      messages = [{
        role: 'user',
        content: [
          {
            type: 'text',
            text: finalMessage || '请分析这张图片'
          },
          {
            type: 'image_url',
            image_url: {
              url: fileList.value[0].content // 这里现在是OSS URL
            }
          }
        ]
      }];
      
      console.log('发送包含图片的消息:', {
        text: finalMessage,
        imageUrl: fileList.value[0].content
      });
    } else {
      // 普通文本消息
      messages = [{ role: 'user', content: finalMessage }];
    }
    
    // 记录助手消息的索引，用于后续更新
    let assistantMessageIndex = -1;
    let accumulatedContent = '';
    let hasStartedResponse = false;
    
    console.log('开始发送消息，准备接收AI回复');
    
    // 使用流式API发送消息
    sendChatMessageStream(
      messages,
      // 处理每个数据块
      (chunk) => {
        console.log('收到流式数据:', chunk);
        
        if (chunk.type === 'connected') {
          console.log('SSE连接已建立');
          return;
        }
        
        if (chunk.type === 'text' && chunk.content) {
          accumulatedContent += chunk.content;
          
          // 如果是第一条文本内容，添加一个新的助手消息
          if (!hasStartedResponse) {
            chatMessageRef?.addAssistantMessage(accumulatedContent);
            hasStartedResponse = true;
            // 获取刚添加的助手消息的索引（应该是最后一个）
            assistantMessageIndex = (chatMessageRef?.getMessageCount() || 1) - 1;
            console.log('添加新助手消息，索引:', assistantMessageIndex, '内容:', accumulatedContent);
          } else {
            // 更新现有的助手消息
            if (chatMessageRef?.updateAssistantMessage && assistantMessageIndex >= 0) {
              chatMessageRef.updateAssistantMessage(assistantMessageIndex, accumulatedContent);
              console.log('更新助手消息，索引:', assistantMessageIndex, '累积长度:', accumulatedContent.length);
            }
          }
          
          console.log('收到文本块:', chunk.content, '累积内容长度:', accumulatedContent.length);
        }
        
        // 处理工具调用结果
        if (chunk.type === 'tool_result') {
          console.log('收到工具调用结果:', chunk);
          
          // 构造符合chatMessage.vue期望的数据结构
          const toolData = {
            tool: (chunk as any).tool,
            success: (chunk as any).success,
            data: (chunk as any).data,
            message: (chunk as any).message
          };
          
          // 如果还没有开始响应，先添加一个助手消息
          if (!hasStartedResponse) {
            chatMessageRef?.addAssistantMessage(accumulatedContent, toolData);
            hasStartedResponse = true;
            assistantMessageIndex = (chatMessageRef?.getMessageCount() || 1) - 1;
            console.log('添加带工具结果的助手消息，索引:', assistantMessageIndex, '工具数据:', toolData);
          } else {
            // 更新现有消息，添加工具调用结果
            if (chatMessageRef?.updateAssistantMessage && assistantMessageIndex >= 0) {
              chatMessageRef.updateAssistantMessage(assistantMessageIndex, accumulatedContent, toolData);
              console.log('更新助手消息并添加工具结果，索引:', assistantMessageIndex, '工具数据:', toolData);
            }
          }
        }
        
        if (chunk.type === 'end') {
          console.log('流式响应结束');
        }
      },
      // 完成回调
      () => {
        showToast('消息发送成功');
        // 清空输入框和重置模式
        clearInput();
        resetMode();
        // 更新最终状态
        isSending.value = false;
        chatMessageRef?.setLoading(false);
        closeToast();
      },
      // 错误回调
      (error) => {
        showToast(error || '消息发送失败');
        // 添加错误消息到聊天记录
        if (assistantMessageIndex === -1) {
          chatMessageRef?.addAssistantMessage(error || '抱歉，发送失败，请稍后重试');
        } else {
          chatMessageRef?.updateAssistantMessage(assistantMessageIndex, error || '抱歉，消息发送过程中出现错误');
        }
        // 更新最终状态
        isSending.value = false;
        chatMessageRef?.setLoading(false);
        closeToast();
      }
    );
    
    // 可以在这里添加取消请求的逻辑
    // controller.abort();
    
  } catch (error: any) {
    showToast(error.message || '网络错误，请稍后重试');
    console.error('发送消息失败:', error);
    // 添加错误消息到聊天记录
    chatMessageRef?.addAssistantMessage(error.message || '网络错误，请稍后重试');
    
    // 更新最终状态
    isSending.value = false;
    chatMessageRef?.setLoading(false);
    closeToast();
  }
};

// 重置模式
const resetMode = () => {
  currentMode.value = '';
  placeholder.value = '把想知道的旅行问题告诉小游匣';
};

// 处理火车票查询按钮点击
const handleTrainTicketQuery = () => {
  // 清空输入框内容
  messageText.value = '';
  // 设置模式
  currentMode.value = 'trainTicket';
  // 修改提示词
  placeholder.value = '请告诉小游匣日期、出发地、目的地';
};

// 处理天气查询按钮点击
const handleWeatherQuery = () => {
  // 清空输入框内容
  messageText.value = '';
  // 设置模式
  currentMode.value = 'weather';
  // 修改提示词
  placeholder.value = '请告诉小游匣哪座城市';
};
</script>

<style scoped lang="less"> 
    .input-area{
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        :deep(.van-uploader__wrapper--disabled){
            opacity: inherit;
            margin-left: 15px;
            .van-uploader__preview{
                background-color: #fff;
            }
        }
        .input-btn{
            display: flex;
            justify-content: space-between;
            padding: 5px 15px;
        }
    }
    .input-content{
        background-color: #fff;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 20px;
        padding-top: 5px;
        img{
            width: 25px;
            height: 25px;
            margin: 0 10px;
        }
        .input-field{
            background-color: #f8f9fd;
            flex: 1;
            border-radius: 10px;
            padding: 5px;
        }
        .send-btn{
            background-color: #92e3fe;
            font-size: 15px;
            color: #fff;
            font-family: 'WenXinXiLeTi', sans-serif;
            font-weight: bold;
            margin: 0 5px;
        }
    }
</style>